<template>
	<view class="container">
		<view class="bg-top">
			<view class="top-box">
				<view class="qh-title">
					<text class="qh-ger">个人信息</text>
					<text class="qh-yin">PERSONAL</text>
				</view>
				<view class="bxBox">
					<view class="qh-item">
					   <view class="qh-bt">
						   <uni-icons type="person-filled" size="20" color="#007AFF" class=""></uni-icons>用户</view>
					   <text class="qh-bc">{{ phoneSplice }}</text>
					</view>
					<view class="qh-item">
					   <view class="qh-bt">
						   <uni-icons type="map-filled" size="20" color="#007AFF" class=""></uni-icons>领域</view>
					   <text class="qh-bc">{{ userInfo.businessName }}</text>
					</view>
					<view class="qh-item">
					   <view class="qh-bt">
						   <uni-icons type="staff-filled" size="20" color="#007AFF" class=""></uni-icons>切换领域</view>
					   <navigator url="/pagesClient/base/login" class="qh-logout">点击获取授权</navigator>
					</view>
				</view>
			</view>
		</view>
		
		<tabBar selectedIndex="4" selectedTab="1" />
	</view>
</template>

<script>
	export default {
		data(){
			return{
				userInfo:{},
			}
		},
		async onLoad() {
			// 获取本地存储的信息
			const userInfo = await uni.getStorageSync("userInfo");
			this.userInfo = userInfo;
			// console.log("获取本地存储的用户信息",userInfo);
		},
		computed:{
			phoneSplice() {
			    let startIndex = 3;  // 开始位置
			    let endIndex = 7;    // 结束位置
			    const { userPhone } = uni.getStorageSync("userInfo");
			
			    // 确保 userPhone 已定义且非空
			    if (userPhone && typeof userPhone === 'string') {
			        // 提取前后部分，拼接替换内容
			        let newStr = userPhone.slice(0, startIndex) + "****" + userPhone.slice(endIndex);
			        return newStr;
			    } else {
			        // 如果 userPhone 无效，则返回一个默认值或者错误提示
			        return '';
			    }
			}
		},
		async mounted() {
			// 获取本地存储的信息
			// this.userInfo = await uni.getStorageSync("userInfo");
			// console.log("获取本地存储的用户信息",this.userInfo);
		}
	}
</script>

<style lang="scss">
	/* app端 */
	/* #ifdef APP-PLUS || H5 */
	#app,
	/* #endif */
	page {
	  background-color: #F9FAFB;
	  height: 100%;
	}
	.container {
		// width: 750rpx;
		color: #333333;

		.bg-top {
			margin-top: -1rpx;
			width: 750rpx;
			height: 220rpx;
			padding-top: 50rpx;
			border-radius: 0 0 20% 20%;
			// background-color: #0081ff;
			background-color: #2698fb;
			// background: linear-gradient(271deg, #2698fb 0%, #84c6ff 100%);
			.top-box {
				width: 635rpx;
				background-color: #FFFFFF;
				margin: 0 auto;
				border-radius: 20rpx;
				padding: 20rpx 30rpx 0rpx;
				position: relative;

				.qh-title {
					width: 100%;
					height: 80rpx;
					letter-spacing: 1.5rpx;
					.qh-ger {
						position: absolute;
						left: 50rpx;
						// color: hsl(210, 100%, 60%);
						color: #007AFF;
						font-size: 40rpx;
						font-weight: bold;
						z-index: 999;
					}

					.qh-yin {
						position: absolute;
						left: 68rpx;
						top: 40rpx;
						font-size: 40rpx;
						font-weight: bold;
						text-shadow: 0 0 2px rgba(0, 129, 255, 0.5);
						color: transparent;
					}
				}

				.bxBox {
					background-color: #ffffff;
					font-size: 30rpx;
					.qh-item{
						display: flex;
						min-height: 100rpx;
						align-items: center;
						justify-content: space-between;
						width: 100%;
						border-bottom: 1rpx solid #f4f4f4;
						.qh-bt{
							display: flex;
							align-items: center;
						}
						.qh-bc{
							font-size: 25rpx;
							color: #ababab;
						}
						.qh-logout{
							background: rgba(0, 129, 255, 0.5);
							padding: 0 30rpx;
							border-radius: 20rpx;
							color: #0081ff;
						}
					}
				}

			}
		}
	}
</style>